<template>
  <el-dialog
    v-loading="loading"
    title="题目预览"
    width="900px"
    :visible="dialogFormVisible"
    @close="closeDialog"
  >
    <div>
      <!-- :gutter="5" -->
      <el-row>
        <el-col :span="6">
          【题型】：<span>{{
            tableData.questionType == '1'
              ? '单选'
              : tableData.questionType === '2'
              ? '多选'
              : '简答'
          }}</span>
        </el-col>
        <el-col :span="6">
          【编号】：<span>{{ tableData.id }}</span>
        </el-col>
        <el-col :span="6">
          【难度】：<span>{{
            tableData.difficulty === '1'
              ? '简单'
              : tableData.difficulty === '2'
              ? '一般'
              : '困难'
          }}</span>
        </el-col>
        <el-col :span="6">
          【标签】：<span>{{ tableData.tags }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          【学科】：<span>{{ tableData.subjectName }}</span>
        </el-col>
        <el-col :span="6">
          【目录】：<span>{{ tableData.catalogID }}</span>
        </el-col>
        <el-col :span="6">
          【方向】：<span>{{ tableData.direction }}</span>
        </el-col>
      </el-row>
      <hr />
      <p>
        【题干】：<span style="color: skyblue" v-html="tableData.question" />
      </p>
      <p>选项：（以下选中的选项为正确答案）</p>
      <!-- <p v-for="(item, index) in tableData.options" :key="index"> -->
      <el-row :gutter="10">
        <checkbox ref="checkInput">
          <template #radio>
            <el-radio-group v-model="radioOption">
              <el-row v-for="(item, index) in tableData.options" :key="index">
                <el-col :span="18" style="margin-top: 10px">
                  <el-radio :label="`${item.code}`" />
                  <span>{{ item.title }}</span>
                </el-col>
              </el-row>
            </el-radio-group>
          </template>
          <template #checkbox>
            <el-checkbox-group v-model="checkboxOptionList">
              <el-row v-for="(item, index) in tableData.options" :key="index">
                <el-col :span="18" style="margin-top: 10px">
                  <el-checkbox :label="`${item.code}`" name="options" />
                  <span>{{ item.title }}</span>
                </el-col>
              </el-row>
            </el-checkbox-group>
          </template>
        </checkbox>
      </el-row>
      <!-- <span>{{ item.code }}:</span><span>{{ item.title }}</span> -->
      <!-- </p> -->
      <hr />
      <span>【参考答案】：</span>
      <el-button type="danger" @click="show = !show">视频答案预览</el-button>
      <div v-if="show" style="border: 1px solid black; width: 50%">
        <!-- 52252 -->
        <video :src="tableData.videoURL" />
      </div>
      <hr />
      <p>【答案解析】：</p>
      <span v-html="tableData.answer" />
      <hr />
      <p>【题目备注】：</p>
      <p>{{ tableData.remarks }}</p>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="closeDialog">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getBaseQueBankInfoApi } from '@/api/queBank'
import checkbox from './checkbox.vue'
export default {
  components: {
    checkbox
  },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    flag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableData: {},
      loading: false,
      show: false,
      // 单选答案
      radioOption: '',
      // 多选答案的数组
      checkboxOptionList: []
    }
  },
  methods: {
    // 关闭弹层
    closeDialog() {
      this.$emit('update:dialogFormVisible', false)
    },
    // 获取基础题库详情
    async getBaseQueBankInfo(id) {
      this.loading = true
      let res = ''
      // if (this.flag) {
      //   res = await getChoiceBankApi(id)
      // } else {
      //   res = await getBaseQueBankInfoApi(id)
      // }
      res = await getBaseQueBankInfoApi(id)
      for (const key in res.data) {
        if (key === 'questionType') {
          if (res.data[key] === '1') {
            this.$refs.checkInput.checkboxname = 'radio'
            // res.data[key] = '单选'
            res.data.options.forEach((item) => {
              if (item.isRight === 1) {
                this.radioOption = item.code
              }
            })
          } else if (res.data[key] === '2') {
            this.$refs.checkInput.checkboxname = 'checkbox'
            // res.data[key] = '多选'
            res.data.options.forEach((item) => {
              if (item.isRight === 1) {
                this.checkboxOptionList.push(item.code)
              }
            })
          } else {
            // res.data[key] = '简答'
          }
        }
      }
      this.tableData = res.data
      this.loading = false
    }
  }
}
</script>

<style scoped lang="scss">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
